<template>
  <div>
    <div>
      <div class="a">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">考评概览</el-menu-item>
          <el-menu-item index="2">点检概览</el-menu-item>
        </el-menu>
      </div>
      <div v-if="showContent">
        <div v-loading="loading">
          <div class="b">
            <el-button-group size="small" style="margin-bottom: 10px">
              <el-button
                  size="small"
                  :type="activeType === '1' ? 'primary' : 'default'"
                  @click="selectType('1')"
              >
                本周
              </el-button>
              <el-button
                  size="small"
                  :type="activeType === '2' ? 'primary' : 'default'"
                  @click="selectType('2')"
              >
                上周
              </el-button>
              <el-button
                  size="small"
                  :type="activeType === '3' ? 'primary' : 'default'"
                  @click="selectType('3')"
              >
                本月
              </el-button>
              <el-button
                  size="small"
                  :type="activeType === '4' ? 'primary' : 'default'"
                  @click="selectType('4')"
              >
                上月
              </el-button>
              <el-button
                  size="small"
                  :type="activeType === '5' ? 'primary' : 'default'"
                  @click="selectType('5')"
              >
                自定义
              </el-button>
            </el-button-group>
            <el-date-picker
                v-if="option"
                size="small"
                style="margin-left: 10px;width: 300px"
                v-model="dateSearch"
                type="daterange"
                clearable
                @change="getDate"
                format-value="yyyy-MMMM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-select size="small" style="margin-left: 10px;width: 100px" v-model="type">
              <el-option label="按门店" value="1"></el-option>
              <!--            <el-option label="按计划" value="2"></el-option>-->
            </el-select>
            <el-select size="small" style="" filterable v-model="assignTaskId">
              <el-option v-for="item in storeList" :label="item.assignName" :value="item.assignTaskId"
                         :key="item.assignTaskId"></el-option>
            </el-select>
            <el-select size="small" style="margin-left: 10px;width: 100px" v-model="type">
              <el-option label="按模板" value="1"></el-option>
              <!--            <el-option label="按计划" value="2"></el-option>-->
            </el-select>
            <el-select size="small" style="width: 200px" v-model="patrolTemplateId">
              <el-option v-for="item in templateList" :label="item.templateName" :value="item.templateId"
                         :key="item.templateId"></el-option>
            </el-select>
            <!--          <el-select size="small" style="margin-left: 10px;width: 100px" v-model="type">-->
            <!--            <el-option label="巡查组织" value="1"></el-option>-->
            <!--            <el-option label="巡查人" value="2"></el-option>-->
            <!--          </el-select>-->
            <!--          <el-input size="small" placeholder="请输入用户组织名称" style="width: 200px"></el-input>-->
            <!--          <el-select size="small" style="margin:0 10px" placeholder="请选择职位" v-model="type">-->
            <!--            <el-option label="测试" value="1"></el-option>-->
            <!--            <el-option label="巡查人" value="2"></el-option>-->
            <!--          </el-select>-->
            <!--          <el-select size="small" style="margin-right: 10px" placeholder="全部门店状态" v-model="type">-->
            <!--            <el-option label="测试" value="1"></el-option>-->
            <!--            <el-option label="巡查人" value="2"></el-option>-->
            <!--          </el-select>-->
            <!--          <el-select size="small" style="margin-right: 10px" placeholder="全部门店类型" v-model="type">-->
            <!--            <el-option label="测试" value="1"></el-option>-->
            <!--            <el-option label="巡查人" value="2"></el-option>-->
            <!--          </el-select>-->
            <el-button size="small"
                       style="background-color:#303e9d;color: #eeeeee;border: none;height: 30px;margin-left: 15px"
                       @click="searchFn">查 询
            </el-button>
            <el-button size="small" style="height: 30px" @click="reset">重 置</el-button>
          </div>
          <div class="c">
            <div class="c1" v-if="activeIndex=='1'">
              <p style="display: flex;justify-content: space-between">
                <img src="https://www.hik-cloud.com/chain/static/img/ic_60_chart_store.6d20324d.png" alt="">
                <!--              <el-link style="color: #303e9d;text-decoration: none">查看详情 >></el-link>-->
              </p>
              <div style="" class="p">
                <!--              <p>-->
                <!--                <span>考评覆盖率</span>-->
                <!--                <span style="color: #ff6a00;font-size: 30px">100%</span>-->
                <!--              </p>-->
                <p>
                  <span>考评门店</span>
                  <span style="font-size: 30px">{{ headerData.patrolNum }}</span>
                </p>
                <p>
                  <span>平均得分率</span>
                  <span style="font-size: 30px">{{ headerData.storeAverageScore }}%</span>
                </p>
              </div>
            </div>
            <div class="c2" v-if="activeIndex=='1'">

              <p style="display: flex;justify-content: space-between">
                <img src="https://www.hik-cloud.com/chain/static/img/ic_60_chart_inspector.1d619d2f.png" alt="">
                <!--              <el-link style="color: #303e9d;text-decoration: none">查看详情 >></el-link>-->
              </p>
              <div style="" class="p">
                <p>
                  <span>考评人数</span>
                  <span style="font-size: 30px">{{ headerData.patrolPeopleNum }} <a style="font-size: 18px">人</a></span>
                </p>
                <p>
                  <span>考评次数</span>
                  <span style="font-size: 30px">{{ headerData.patrolNum }}/<a style="font-size: 18px">次</a></span>
                </p>
                <!--              <p>-->
                <!--                <span>考评平均耗时</span>-->
                <!--                <span style="font-size: 30px">99.57%</span>-->
                <!--              </p>-->
              </div>
            </div>
            <div class="c3" v-if="activeIndex=='1'">

              <p style="display: flex;justify-content: space-between">
                <img src="https://www.hik-cloud.com/chain/static/img/ic_60_chart_disqualify.502fd134.png" alt="">
                <!--              <el-link style="color: #303e9d;text-decoration: none">查看详情 >></el-link>-->
              </p>
              <div style="" class="p">
                <!--              <p>-->
                <!--                <span>不合格问题数</span>-->
                <!--                <span style="font-size: 30px">1<a style="font-size: 18px">个</a></span>-->
                <!--              </p>-->
                <p>
                  <span>需整改问题</span>
                  <span style="font-size: 30px">{{ headerData.unqualifiedNum }}</span>
                </p>
                <p>
                  <span>整改完成率</span>
                  <span style="font-size: 30px">{{ headerData.rectificationRate }}%</span>
                </p>
              </div>
            </div>
          </div>
          <div class="d" v-if="activeIndex=='1'">
            <div class="d1">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <p style="font-size: 16px;font-weight: 500">巡查大类排行</p>
                <p>
                  <el-button-group size="small" style="margin-bottom: 10px">
                    <!--                  <el-button size="small"><i class="el-icon-menu"></i>表格</el-button>-->
                    <!--                  <el-button size="small"><i class="el-icon-orange"></i>雷达图</el-button>-->
                    <el-button size="small"><i class="el-icon-download"></i>导出Excel</el-button>
                    <!--                  <el-button size="small"><i class="el-icon-search"></i>查看详情</el-button>-->
                  </el-button-group>
                </p>
              </div>
              <el-table :data="largeList"
                        height="430px"
                        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                        :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#F5F5F5',
          color: '#000',
        }"
              >
                <el-table-column label="ID" prop="" width="50">
                  <template v-slot:default="scope">
                    <span style="color: #ff6a00;font-weight: bold">{{ scope.row.largeId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="巡查大类名称" prop="largeName" width="350"></el-table-column>
                <el-table-column label="不合格问题率" prop="unqualifiedRate"></el-table-column>
                <el-table-column label="平均得分率" prop="scoreRate"></el-table-column>
              </el-table>
              <!--            <div style="display: flex;justify-content: center;margin-top: 10px;text-decoration: none">-->
              <!--              <el-link style="color: #303e9d">查看详情>></el-link>-->
              <!--            </div>-->
            </div>
            <div class="d2">
              <div style="margin: 10px 0">
                <p style="font-size: 16px;font-weight: 500">巡查项排行</p>
              </div>
              <el-table :data="patrolList"
                        height="430px"
                        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                        :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#F5F5F5',
          color: '#000',
        }"
              >
                <el-table-column label="ID" prop="a1" width="50">
                  <template v-slot:default="scope">
                    <span style="color: #ff6a00;font-weight: bold">{{ scope.row.termId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="巡查项名称" prop="termName" width="350"></el-table-column>
                <el-table-column label="不合格问题率" prop="unqualifiedRate"></el-table-column>
                <el-table-column label="平均得分率" prop="scoreRate"></el-table-column>
              </el-table>
              <div style="display: flex;justify-content: center;margin-top: 10px;text-decoration: none">
                <!--              <el-link style="color: #303e9d">查看详情>></el-link>-->
              </div>
            </div>
          </div>
          <div class="d" v-if="activeIndex=='1'">
            <div class="d1">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <p style="font-size: 16px;font-weight: 500">巡查问题排行</p>
                <p>
                  <el-select size="small" style="width: 150px;margin-bottom: 10px" v-model="problem">
                    <el-option value="1" label="全部巡查问题"></el-option>
                  </el-select>
                </p>
              </div>
              <el-table :data="problemData"
                        height="430px"
                        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                        :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#F5F5F5',
          color: '#000',
        }"
              >
                <el-table-column label="ID" prop="a1" width="80">
                  <template v-slot:default="scope">
                    <span style="color: #ff6a00;font-weight: bold">{{ scope.row.problemId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="巡查问题名称" prop="problemName" width="350"></el-table-column>
                <!--              <el-table-column label="出现次数" prop="b"></el-table-column>-->
                <el-table-column label="不合格问题率" prop="unqualifiedRate"></el-table-column>
                <el-table-column label="平均得分率" prop="scoreRate"></el-table-column>
              </el-table>
              <div>
              </div>
            </div>

          </div>

        </div>
        <div v-if="activeIndex=='2'" v-loading="loading">
          <div class="c">
            <div class="c1">
              <p style="display: flex;justify-content: space-between">
                <img src="https://www.hik-cloud.com/chain/static/img/ic_60_chart_store.6d20324d.png" alt="">
                <!--              <el-link style="color: #303e9d;text-decoration: none">查看详情 >></el-link>-->
              </p>
              <div style="" class="p">
                <!--              <p>-->
                <!--                <span>考评覆盖率</span>-->
                <!--                <span style="color: #ff6a00;font-size: 30px">100%</span>-->
                <!--              </p>-->
                <p>
                  <span>点检门店</span>
                  <span style="font-size: 30px">{{ headerData.patrolNum }}</span>
                </p>
                <p>
                  <span>平均得分率</span>
                  <span style="font-size: 30px">{{ headerData.storeAverageScore }}%</span>
                </p>
              </div>
            </div>
            <div class="c2">

              <p style="display: flex;justify-content: space-between">
                <img src="https://www.hik-cloud.com/chain/static/img/ic_60_chart_inspector.1d619d2f.png" alt="">
                <!--              <el-link style="color: #303e9d;text-decoration: none">查看详情 >></el-link>-->
              </p>
              <div style="" class="p">
                <p>
                  <span>点检人数</span>
                  <span style="font-size: 30px">{{ headerData.patrolPeopleNum }} <a style="font-size: 18px">人</a></span>
                </p>
                <p>
                  <span>点检次数</span>
                  <span style="font-size: 30px">{{ headerData.patrolNum }}/<a style="font-size: 18px">次</a></span>
                </p>
                <!--              <p>-->
                <!--                <span>考评平均耗时</span>-->
                <!--                <span style="font-size: 30px">99.57%</span>-->
                <!--              </p>-->
              </div>
            </div>
            <div class="c3">
              <p style="display: flex;justify-content: space-between">
                <img src="https://www.hik-cloud.com/chain/static/img/ic_60_chart_disqualify.502fd134.png" alt="">
                <!--              <el-link style="color: #303e9d;text-decoration: none">查看详情 >></el-link>-->
              </p>
              <div style="" class="p">
                <!--              <p>-->
                <!--                <span>不合格问题数</span>-->
                <!--                <span style="font-size: 30px">1<a style="font-size: 18px">个</a></span>-->
                <!--              </p>-->
                <p>
                  <span>需整改问题</span>
                  <span style="font-size: 30px">{{ headerData.unqualifiedNum }}</span>
                </p>
                <p>
                  <span>整改完成率</span>
                  <span style="font-size: 30px">{{ headerData.rectificationRate }}%</span>
                </p>
              </div>
            </div>
          </div>
          <div class="d">
            <div class="d1">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <p style="font-size: 16px;font-weight: 500">巡查大类排行</p>
                <p>
                  <el-button-group size="small" style="margin-bottom: 10px">
                    <!--                  <el-button size="small"><i class="el-icon-menu"></i>表格</el-button>-->
                    <!--                  <el-button size="small"><i class="el-icon-orange"></i>雷达图</el-button>-->
                    <el-button size="small"><i class="el-icon-download"></i>导出Excel</el-button>
                    <!--                  <el-button size="small"><i class="el-icon-search"></i>查看详情</el-button>-->
                  </el-button-group>
                </p>
              </div>
              <el-table :data="largeList"
                        height="430px"
                        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                        :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#F5F5F5',
          color: '#000',
        }"
              >
                <el-table-column label="ID" prop="" width="50">
                  <template v-slot:default="scope">
                    <span style="color: #ff6a00;font-weight: bold">{{ scope.row.largeId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="巡查大类名称" prop="largeName" width="350"></el-table-column>
                <el-table-column label="不合格问题率" prop="unqualifiedRate"></el-table-column>
                <el-table-column label="平均得分率" prop="scoreRate"></el-table-column>
              </el-table>
              <!--            <div style="display: flex;justify-content: center;margin-top: 10px;text-decoration: none">-->
              <!--              <el-link style="color: #303e9d">查看详情>></el-link>-->
              <!--            </div>-->
            </div>
            <div class="d2">
              <div style="margin: 10px 0">
                <p style="font-size: 16px;font-weight: 500">巡查项排行</p>
              </div>
              <el-table :data="patrolList"
                        height="430px"
                        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                        :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#F5F5F5',
          color: '#000',
        }"
              >
                <el-table-column label="ID" prop="a1" width="50">
                  <template v-slot:default="scope">
                    <span style="color: #ff6a00;font-weight: bold">{{ scope.row.termId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="巡查项名称" prop="termName" width="350"></el-table-column>
                <el-table-column label="不合格问题率" prop="unqualifiedRate"></el-table-column>
                <el-table-column label="平均得分率" prop="scoreRate"></el-table-column>
              </el-table>
              <div style="display: flex;justify-content: center;margin-top: 10px;text-decoration: none">
                <!--              <el-link style="color: #303e9d">查看详情>></el-link>-->
              </div>
            </div>
          </div>
          <div class="d">
            <div class="d1">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <p style="font-size: 16px;font-weight: 500">巡查问题排行</p>
                <p>
                  <el-select size="small" style="width: 150px;margin-bottom: 10px" v-model="problem">
                    <el-option value="1" label="全部巡查问题"></el-option>
                  </el-select>
                </p>
              </div>
              <el-table :data="problemData"
                        height="430px"
                        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                        :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#F5F5F5',
          color: '#000',
        }"
              >
                <el-table-column label="ID" prop="a1" width="80">
                  <template v-slot:default="scope">
                    <span style="color: #ff6a00;font-weight: bold">{{ scope.row.problemId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="巡查问题名称" prop="problemName" width="350"></el-table-column>
                <!--              <el-table-column label="出现次数" prop="b"></el-table-column>-->
                <el-table-column label="不合格问题率" prop="unqualifiedRate"></el-table-column>
                <el-table-column label="平均得分率" prop="scoreRate"></el-table-column>
              </el-table>
              <div>
                <!--              <el-link style="color: #303e9d">查看详情>></el-link>-->
              </div>
            </div>
            <!--          <div class="d2">-->
            <!--            <div style="display: flex;justify-content: space-between;align-items: center">-->
            <!--              <p style="font-size: 16px;font-weight: 500">整改情况统计</p>-->
            <!--              <el-button-group size="small" style="margin-bottom: 10px">-->
            <!--                <el-button size="small">按问题单</el-button>-->
            <!--                <el-button size="small">按考评单</el-button>-->
            <!--                <el-button size="small">整改问题Excel</el-button>-->
            <!--                <el-button size="small">查看详情</el-button>-->
            <!--              </el-button-group>-->
            <!--            </div>-->
            <!--            <div class="main">-->
            <!--              <echart :echartsData="afterSalePie" v-if="afterSalePie" style="height: 100%;margin-top: 50px"></echart>-->
            <!--              &lt;!&ndash;              1&ndash;&gt;-->
            <!--              <div>-->
            <!--                <div>-->
            <!--                  <p style="font-size: 16px;font-weight: bold">正常问题单</p>-->
            <!--                  <p style="font-size: 18px;font-weight: bold">1个</p>-->
            <!--                  <h2 class="percent">100%</h2>-->
            <!--                  <p>-->
            <!--                    <span style="display: flex;align-items: center"><a style="background-color:#3A93FF"></a>已完成</span>-->
            <!--                    <span>0</span>-->
            <!--                    <span style="font-weight: bold">0.00%</span>-->
            <!--                  </p>-->
            <!--                </div>-->
            <!--                <div>-->
            <!--                  <p>-->
            <!--                    <span style="display: flex;align-items: center"><a style="background: rgba(58, 147, 255, 0.6);"></a>待整改</span>-->
            <!--                    <span>0</span>-->
            <!--                    <span style="font-weight: bold">0.00%</span>-->
            <!--                  </p>-->
            <!--                </div>-->
            <!--                <div>-->
            <!--                  <p>-->
            <!--                    <span style="display: flex;align-items: center"><a-->
            <!--                        style="    background: rgba(58, 147, 255, 0.3);"></a>待审核</span>-->
            <!--                    <span>0</span>-->
            <!--                    <span style="font-weight: bold">0.00%</span>-->
            <!--                  </p>-->
            <!--                </div>-->
            <!--                <div style="margin-top: 15px">-->
            <!--                  <p style="font-size: 16px;font-weight: bold">超期问题单 <span-->
            <!--                      style="font-size: 13px;color:#ff6a00 ">#可整改</span></p>-->
            <!--                  <p style="font-size: 18px;font-weight: bold">1个</p>-->
            <!--                  <h2 class="percent" style="background-color:#ff6a00;">100%</h2>-->
            <!--                  <p>-->
            <!--                    <span style="display: flex;align-items: center"><a style="background-color:#ff6a00"></a>已完成</span>-->
            <!--                    <span>0</span>-->
            <!--                    <span style="font-weight: bold">0.00%</span>-->
            <!--                  </p>-->
            <!--                </div>-->
            <!--                <div>-->
            <!--                  <p>-->
            <!--                    <span style="display: flex;align-items: center"><a style="background: rgba(255, 164, 0, 0.6);"></a>待整改</span>-->
            <!--                    <span>0</span>-->
            <!--                    <span style="font-weight: bold">0.00%</span>-->
            <!--                  </p>-->
            <!--                </div>-->
            <!--                <div>-->
            <!--                  <p>-->
            <!--                    <span style="display: flex;align-items: center"><a style="background: rgba(255, 164, 0, 0.3);"></a>待审核</span>-->
            <!--                    <span>0</span>-->
            <!--                    <span style="font-weight: bold">0.00%</span>-->
            <!--                  </p>-->
            <!--                </div>-->
            <!--                <div style="margin-top: 15px">-->
            <!--                  <p style="font-size: 16px;font-weight: bold">超期问题单<span-->
            <!--                      style="font-size: 13px;color:red ">#不可整改</span></p>-->
            <!--                  <p style="font-size: 18px;font-weight: bold">1个</p>-->
            <!--                  <h2 class="percent" style="background-color:red;">100%</h2>-->
            <!--                  <p>-->
            <!--                    <span style="display: flex;align-items: center"><a style="background-color:red"></a>整改未完成</span>-->
            <!--                    <span>0</span>-->
            <!--                    <span style="font-weight: bold">0.00%</span>-->
            <!--                  </p>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--              &lt;!&ndash;              1&ndash;&gt;-->
            <!--            </div>-->
            <!--          </div>-->
          </div>
        </div>
      </div>
      <div v-else style="display: flex; flex-direction: column; align-items: center">
        <el-image
            src="https://qiniushelves.jiachuangnet.com/shelf/img/V1754988859325noData.png"
        ></el-image>
        <p>暂无数据~</p>
      </div>
    </div>
  </div>
</template>

<script>
import echart from "@/RayComponents/echart.vue";
import dayjs from "dayjs";

export default {
  name: "patrolAnalyze",
  components: {
    echart,
  },
  data() {
    return {
      activeIndex: "1",
      problem: "1",
      option: false,
      loading: false,
      headerData: {},
      showContent: false,
      assignTaskId: "",
      activeType: "1",
      patrolTemplateId: "",
      dateSearch: "",
      flag: '1',
      type: '1',
      templateList: [],
      patrolList: [],
      largeList: [],
      storeList: [],
      afterSalePie: null,
      problemData: []
    }
  },
  mounted() {

  },
  created() {
    Promise.all([
      // this.getSaleAfter(),
      this.getStoreTemplate()
    ]).then(() => {
      this.getTableData();
    });
  },
  methods: {
    selectType(type) {
      this.activeType = type;
      this.flag = type
      this.option = type === '5';
      this.startTime = ''
      this.endTime = ''
      this.dateSearch = ''
      this.getTableData()
    },
    handleSelect(key, keyWord) {
      this.loading = true
      this.activeIndex = key
      this.getTableData()
    },
    async getStoreTemplate() {
      this.loading = true
      const templateData = await this.$api.patrolGetPatrolTemplateVo({
        pageNumber: 1,
        pageSize: 100000,
        state: 1
      }).then()
      if (templateData.data.length != 0) {
        this.showContent = true
        this.templateList = templateData.data
        this.patrolTemplateId = this.templateList[0].templateId
        const storeData = await this.$api.patrolGetPatrolStoreVo({
          pageNumber: 1,
          pageSize: 100000,
        }).then()
        this.storeList = storeData.data
      } else {
        this.loading = false
        this.showContent = false
      }
    },
    getDate(val) {
      if (val) {
        this.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.startTime = ''
        this.endTime = ''
      }
    },
    async getTableData() {
      const params = {
        assignTaskId: this.assignTaskId,
        patrolTemplateId: this.patrolTemplateId,
        flag: this.flag,
        type: this.activeIndex,
        startTime: this.startTime,
        endTime: this.endTime
      }
      this.loading = false
      const largeData = await this.$api.patrolGetPatrolLargeTop(params).then()
      this.largeList = largeData.data
      const header = await this.$api.patrolGetPatrolOverviewData(params).then()
      this.headerData = header
      const patrolData = await this.$api.patrolGetPatrolTermTop(params).then()
      this.patrolList = patrolData.data
      const problem = await this.$api.patrolGetPatrolLargeTermProblemTop(params).then()
      this.problemData = problem.data
    },
    searchFn() {
      this.getTableData()
    },
    reset() {
      this.patrolTemplateId = this.templateList[0].templateId
      this.assignTaskId = ""
      this.getTableData()
    }
  }
}
</script>

<style scoped lang="less">
.a {
  height: 30px;
  width: 100%;
}

.b {
  display: flex;
  flex-wrap: wrap;
  //min-height: 50px;
  margin: 10px 0;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
}

.c {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .c1, .c2, .c3 {
    padding: 10px 20px;
    box-sizing: border-box;
    width: 33%;
    height: 220px;
    border: 1px solid #eee;

    img {
      width: 70px;
    }
  }
}

.d {
  width: 100%;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;

  .d1, .d2 {
    position: relative;
    width: 49.5%;
    box-sizing: border-box;
    height: 500px;
    border: 1px solid #eeeeee;
    padding: 10px;

    .el-link {
      position: absolute;
      left: 50%;
      bottom: 20px;
    }
  }
}

.main {
  width: 80%;
  height: 80%;
  display: flex;
  margin-top: 10px;

  a {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
    display: block
  }

  p {
    width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      display: block;

    }
  }
}

.percent {
  width: 80px;
  height: 30px;
  background-color: #3A93FF;
  color: #eeeeee;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  line-height: 28px;
}

.p {
  display: flex;
  justify-content: space-around;

  p {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  span {
    display: block;
    margin-top: 20px;
  }
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #303e9d;
  color: #303e9d;
}

.el-menu--horizontal > .el-menu-item {
  height: 25px;
  font-size: 16px;
  font-weight: 500;
  line-height: 10px;
}
</style>